<template>
    <van-field label-class="input-label" size="large">
        <span slot="label" class="label">
            {{label}}
            <i class="required" v-if="required">*</i>
        </span>
        <span slot="input" class="value">{{value}}</span>
        <template #button>
            <div @click="changeBtnClick()" style="padding-left: 16px;min-width: 60px;text-align: center;border-left: 1px solid rgb(238,238,238);line-height: inherit;">
                <span style="color: #1677FF;font-size: 16px;">{{ btnTxt }}</span>
            </div>
        </template>
    </van-field>
</template>

<script>
    export default {
        name: "changeCell",
        props: {
            label: String,
            value: String,
            required: {
                type: Boolean,
                default: false
            },
            btnTxt: {
                type: String,
                default: '更改'
            }
        },
        methods: {
            changeBtnClick(){
                this.$emit('changeBtn');
            }
        }
    }
</script>

<style scoped lang="less">
    .van-field__control:read-only {
        color: #ccc;
    }
    .input-label{
        .label {
            display: flex;
            align-items: flex-start;

            span {
                font-size: @large;
            }
            .input{
                color: #ccc;
                border: none;
                outline: none;
                width: 100%
            }

            .required {
                color: red;
                font-size: @md;
                margin-top: -3px;
            }
        }
        span{
            font-size: @large;
        }


    }
    .value{
        color: #ccc;
        font-size: @large;
    }
</style>
